import React from 'react'
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import './index.scss'
import Index from '../Index/index'
import HouseList from '../HouseList/index'
import Profile from '../ProFile/index'
import News from '../News'

const tabItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
  }
]
export default class Home extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selectedTab: '/home'
    }
  }

  componentDidUpdate (prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname
      })
    }
  }

  renderTabBarItem () {
    return tabItems.map(item => (
      <TabBar.Item
        key={item}
        icon={<i className={`iconfont ${item.icon}`}></i>}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        title={item.title}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path
          })
          this.props.history.push(item.path)
        }}
        data-seed='logId1'
      ></TabBar.Item>
    ))
  }

  render () {
    return (
      <div className='home'>
        {/* 这里设置的是嵌套路由，就是父路由嵌套子路由的模式，这种是最原始的形式
        子路由必须以父路由的路径为前置部分 */}
        <Route path='/home' exact component={Index}></Route>
        <Route path='/home/list' exact component={HouseList}></Route>
        <Route path='/home/profile' exact component={Profile}></Route>
        <Route path='/home/news' exact component={News}></Route>
        <TabBar tintColor='#21b97a' barTintColor='white' noRenderContent={true}>
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    )
  }
}
